<template>
	<view class="pageBg">
		<Skeleton v-if="skeletonLoading" type="jobfairDetail"></Skeleton>
		<Head ref="head" :title="info.title" type="JobfairolShow" :isWhiteBg='isWhiteBg' :isBack="false"></Head>
		<view class="banner">
			<image src="@/jobfairs/static/img/banner.png"></image>
			<text class="card orange" v-if="info.status === 0">未开始</text>
			<text class="card green" v-if="info.status === 1">进行中</text>
			<text class="card grey" v-if="info.status === 2">已结束</text>
			<view class="bannerSwiper">
				<view class="swiperContent" :style="{width: scrollWidth + 'px',animationDuration: scrollTime + 's' }">
					<view class="swiperInner">
						<view class="swiperItem" v-for="(item,index) in log" :key="index">
							<view class="img">
								<image :src="item.avatar" mode="aspectFill"></image>
							</view>
							<view class="text">{{item.msg}}</view>
						</view>
					</view>
					<view class="swiperInner">
						<view class="swiperItem" v-for="(item,index) in log" :key="index">
							<view class="img">
								<image :src="item.avatar" mode="aspectFill"></image>
							</view>
							<view class="text">{{item.msg}}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="wrapper">
			<view class="statistics">
				<view class="num">
					<view class="t1">{{info.total_company}}</view>
					<view class="t2">参会企业</view>
				</view>
				<view class="num cgBg">
					<view class="t1">{{info.total_job}}</view>
					<view class="t2">可投职位</view>
				</view>
				<view class="num">
					<view class="t1">{{info.click}}</view>
					<view class="t2">浏览次数</view>
				</view>
			</view>
			<view class="search">
				<view class="searchSelect u-border-right" @click="isSearchSelect = !isSearchSelect">
					<!-- #ifdef MP-TOUTIAO || MP-ALIPAY -->
					<view class="defText" :style="{'paddingLeft':'40rpx'}">
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="defText" :style="{'paddingLeft':'30rpx'}">
							<!-- #endif -->
							{{searchSelectVal}}
							<view class="icon">
								<view class="arrowBottom" style="color:#2A2A2A;"></view>
							</view>
							<!-- <u-icon class="icon" size="24" name="arrow-down" color="#2A2A2A"></u-icon> -->
						</view>
					</view>
					<view class="searchIpt">
						<u-input :clearable="false" v-model="searchVal" placeholder="输入搜索名称" type="text"></u-input>
					</view>
					<view class="searchBtn" @click="handleSearch">搜索</view>
				</view>

				<view class="tabWrapper">
					<view class="tabBtn">
						<view :class="currentTab == 'com' ? 'btn ac' : 'btn'" @click="handelTab('com')">企业</view>
						<view :class="currentTab == 'job' ? 'btn ac' : 'btn'" @click="handelTab('job')">职位</view>
						<view :class="currentTab == 'res' ? 'btn ac' : 'btn'" @click="handelTab('res')">人才</view>
						<view :class="currentTab == 'blurb' ? 'btn ac' : 'btn'" @click="handelTab('blurb')">简介</view>
					</view>
					<view class="tabCon">
						<view class="con" v-if="currentTab == 'blurb'">
							<view class="blurb">
								<view class="blurbTitle" v-if="info.title">招聘会名称</view>
								<view class="text" v-if="info.title">{{info.title}}</view>
								<view class="blurbTitle" v-if="info.starttime && info.endtime">举办时间</view>
								<view class="text">{{info.starttime | timeFilter}} 至 {{info.endtime | timeFilter}}
								</view>
								<view class="blurbTitle" v-if="info.content">招聘会简介</view>
								<view class="text" v-if="info.content">
									<u-parse :html="info.content"></u-parse>
								</view>
							</view>
						</view>
						<view class="con" v-if="currentTab == 'job'">
							<view class="jobItem" v-for="(item,index) in jobList" :key="item.id"
								@click="handleJumpJob(item)">
								<view class="jobcon u-border-bottom">
									<view class="jobInfo">
										<view class="jobName font36 overflow">{{item.jobname}}</view>
									</view>
									<view class="jobSalary overflow">{{item.wage_text}}</view>
									<view class="jobTag">
										<view class="tag color1">{{item.district_text}}</view>
										<view class="tag color2">{{item.experience_text}}</view>
										<view class="tag color3">{{item.education_text}}</view>
									</view>
								</view>

								<view class="companyInfo">
									<view class="img">
										<image :src="item.company_logo" mode="aspectFill"></image>
									</view>
									<view class="infoText">
										<view class="t1 overflow">{{item.contact}}</view>
										<view class="t2 overflow">{{item.companyname}} {{item.scale}}</view>
									</view>
									<view class="address overflow">{{item.updatetime}}</view>
								</view>

								<view class="btns">
									<view class="btn blue"
										@click.stop="getJob('job',item.id,item.jobname,item.company_id,item.companyname)"
										data-type="1">在线职聊</view>
									<!-- #ifdef MP-WEIXIN -->
									<view class="btn orange" @click.stop="handelQrcode(item)">微信直面</view>
									<!-- #endif -->
									<!-- #ifdef MP-TOUTIAO || MP-ALIPAY -->
									<view class="btn orange" @click.stop="handleJumpJob(item)">立即查看</view>
									<!-- #endif -->
								</view>
							</view>
							<u-loadmore v-if="jobList.length>0" class="u-loadmore"
								:status="finished_status"></u-loadmore>
							<Empty v-if="jobList.length<=0"></Empty>
						</view>
						<view class="con" v-if="currentTab == 'res'">
							<view class="resumeItem" v-for="(item,index) in resumeList" :key="item.id"
								@click.stop="handleJumpResumeShow(item)">
								<view class="resumeInfo">
									<view class="resumeInner">
										<view class="resumeName substring">{{item.fullname}}<text
												v-if="item.service_tag" class="tag">{{item.service_tag}} </text></view>
										<view class="other substring">
											<text class="otherItem color1"
												v-if="item.age_text">{{item.age_text}}岁</text>
											<text class="otherItem color2"
												v-if="item.education_text">{{item.education_text}}</text>
											<text class="otherItem color3"
												v-if="item.experience_text">{{item.experience_text}}</text>
											<!-- <text class="otherItem" v-if="item.intention_wage">{{item.intention_wage}}</text> -->
										</view>
										<view class="resumeImg">
											<image class="img" :src="item.photo_img_src"></image>
											<image v-if="item.sex == 1" class="man" src="../static/img/index/man.png">
											</image>
											<image v-if="item.sex == 2" class="woman"
												src="../static/img/index/woman.png">
											</image>
										</view>
									</view>

									<view class="resumeBottom"
										v-if="item.intention_jobs!='' || item.intention_district != ''">
										<view class="intentionJob substring" v-if="item.intention_jobs">
											期望职位：{{item.intention_jobs}}
										</view>
										<view class="address substring" v-if="item.intention_district">
											期望地区：{{item.intention_district}}
										</view>
										<view class="address add2 substring" v-if="item.companyname">
											<text class="item">{{item.companyname}}</text> <text
												class="item">{{item.jobname}}</text>
										</view>
									</view>
								</view>
								<view class="btns">
									<view class="btn blue" @click.stop="getJob('resume', item.id,item.fullname)"
										data-type="2">在线职聊</view>
									<view class="btn orange" @click.stop="handleJumpResumeShow(item)">查看简历</view>
								</view>
							</view>
							<u-loadmore v-if="resumeList.length>0" class="u-loadmore"
								:status="finished_status"></u-loadmore>
							<Empty v-if="resumeList.length<=0"></Empty>
						</view>
						<view class="con" v-if="currentTab == 'com'">
							<view class="companyItem" v-for="(item,index) in companyList" :key="item.id"
								@click="handleJumpCompany(item)">
								<view class="companyInfo">
									<view class="img">
										<image :src="item.logo_src" mode="aspectFill"></image>
									</view>
									<view class="infoText">
										<view class="companyName overflow">
											{{item.companyname}}
										</view>
										<view class="tag substring">
											<view class="item">
												{{item | districtText}}
											</view>
											<view class="item" v-if="item.scale_name">
												{{item.scale_name}}
											</view>
											<view class="item" v-if="item.trade_name">
												{{item.trade_name}}
											</view>

										</view>
									</view>
									<view class="icon">
										<view class="arrowRight"></view>
										<!-- <u-icon name="arrow-right" color="#797979"></u-icon> -->
									</view>
								</view>
								<view class="jobList">
									<view class="jobItem u-border-bottom" v-for="(jobItem,index) in item.joblist"
										:key="jobItem.id" @click="handleJumpJob(jobItem)">
										<view class="jobInfo">
											<view class="jobName overflow">{{jobItem.jobname}}</view>
										</view>
										<view class="jobSalary overflow">{{jobItem.wage_text}}</view>
										<view class="jobTag">
											<view class="tag color1">{{jobItem.district_name}}</view>
											<view class="tag color2">{{jobItem.experience}}</view>
											<view class="tag color3">{{jobItem.education}}</view>
										</view>
									</view>
								</view>
								<view class="btns">
									<view class="btn blue"
										@click.stop="getJob('compan',item.id,item.companyname,item.joblist)"
										data-type="1">在线职聊</view>
									<!-- #ifdef MP-WEIXIN -->
									<view class="btn orange" @click.stop="handelQrcode(item)">微信直面</view>
									<!-- #endif -->
									<!-- #ifdef MP-TOUTIAO || MP-ALIPAY -->
									<view class="btn orange" @click.stop="handleJumpCompany(item)">立即查看</view>
									<!-- #endif -->
								</view>
							</view>
							<u-loadmore v-if="companyList.length>0" class="u-loadmore"
								:status="finished_status"></u-loadmore>
							<Empty v-if="companyList.length<=0"></Empty>
						</view>
					</view>
				</view>
			</view>
			<view class="participation" @click="handleJumpReserve">
				我的参会
			</view>
			<view class="footerBtns footerBtnBoxShow">
				<view class="btn color1" @click="doApply(1)">企业参会</view>
				<view class="btn color2" @click="doApply(2)">个人参会</view>
			</view>
			<u-action-sheet :list="searchSelectList" v-model="isSearchSelect"
				@click="handleSearchSelect"></u-action-sheet>
			<LoginPopup ref="loginPopup" :single_login="true" :utype="utype" :after_login_data="after_login_data"
				:redirect="'/jobfairs/JobfairolShow?id=' + id" @phoneNumberLogin="phoneNumberLogin"></LoginPopup>
			<Popup ref="popup" :title="popuPItem.companyname">
				<view class="weixDialog">
					<view class="wxQr">
						<image class="qrCode" :src="popuPItem.qrcode_src"></image>
					</view>
					<view class="wxTips">
						微信内长按二维码
						<br />
						远程面试，快速入职
					</view>
				</view>
			</Popup>
			<!-- 选择职位 -->
			<Popup ref="selectJobPopup" :showTitle="false" :showConfirmButton="false">
				<SelectJob @cancelSelectJob="cancelSelectJob" @handleCommunicate="handleCommunicate"
					@handleCloseSelectJob="handleCloseSelectJob" :chatid="imChatid" :companyId="companyId"
					:isSelectJob="false"></SelectJob>
			</Popup>
			<!-- 选择职位 -->
			<!-- 绑定微信 -->
			<Popup ref="bindWeixinPopup" :showTitle="false" :showConfirmButton="false">
				<view class="bind-weixin-box">
					<view class="title-1">您当前未绑定微信，绑定后可发起聊天。</view>
					<view class="img"><img :src="scanQrcodeImg" alt="" /></view>
					<view class="title-2">使用微信扫一扫，按提示快速绑定</view>
				</view>
			</Popup>
			<!-- 绑定微信 -->
			<TopTips ref="TopTips"></TopTips>
		</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import {
		parseTime
	} from '@/utils/index.js'
	import LoginPopup from '@/components/LoginPopup.vue'
	import {
		onShareAppMessage,
		onShareTimeline
	} from '@/utils/share.js'
	import Skeleton from '@/components/Skeleton.vue'
	import TopTips from '@/components/TopTips.vue'
	import SelectJob from '@/components/SelectJob.vue'
	import Head from '@/components/Head.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			LoginPopup,
			Skeleton,
			TopTips,
			SelectJob,
			Head
		},
		data() {
			return {
				skeletonLoading: true,
				scrollTime: 0,
				scrollWidth: 0,
				popuPItem: {},
				utype: 0,
				after_login_data: {},
				finished_status: 'loadmore',
				currentTab: 'com',
				isSearchSelect: false,
				id: 0,
				pagesize: 10,
				resumePage: 1,
				jobPage: 1,
				companyPage: 1,
				resumeList: [],
				jobList: [],
				companyList: [],
				info: {},
				searchVal: '',
				searchSelectVal: '企业',
				searchSelectList: [{
					text: '职位',
					tab: 'job'
				}, {
					text: '企业',
					tab: 'com'
				}, {
					text: '人才',
					tab: 'res'
				}],
				log: [],
				resume_id: '',
				jobid: 0,
				selectJobShow: false,
				imChatid: '',
				companyId: '',
				selectJobObj: {},
				bindWeixinShow: false,
				fullname: '',
				// 绑定微信二维码
				scanQrcodeImg: '',
				isWhiteBg: false
			};
		},
		onPageScroll(obj) {
			if (obj.scrollTop > 100) {
				this.isWhiteBg = true
			}
			if(obj.scrollTop < 10){
				this.isWhiteBg = false
			}
		},
		onShareAppMessage() {
			let info = {
				...this.info
			}
			info.imgUrl = this.info.thumb
			return onShareAppMessage({
				url: '/jobfairs/JobfairolShow?id=' + this.id,
				alias: "online_jobfairshow",
				info: info
			})
		},
		onShareTimeline() {
			let info = {
				...this.info
			}
			info.imgUrl = this.info.thumb
			return onShareTimeline({
				url: '/jobfairs/JobfairolShow?id=' + this.id,
				alias: "online_jobfairshow",
				info: info
			})
		},
		filters: {
			timeFilter(timestamp) {
				return parseTime(timestamp, '{m}月{d}日 {h}:{i}')
			},
			districtText(item) {
				var str = ''
				if (item.district3_text) {
					str = item.district3_text
				} else if (item.district2_text) {
					str = item.district2_text
				} else if (item.district1_text) {
					str = item.district1_text
				}
				return str
			}
		},
		onLoad(options) {
			this.is_company_login = this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 1
			this.id = options.id ? options.id : 0
			if (options.method) {
				setTimeout(() => {
					this[options.method]()
				}, 1000)
			}
			this.getJobfairShow()
			this.getCompanyList(true)
			this.getJobList(true)
			this.getResumeList(true)
		},
		mounted() {
			// this.isNavTime()
			this.getScanQrcodeImg()
		},
		onReachBottom() {
			this.finished_status = 'loading';
			switch (this.currentTab) {
				case 'job':
					this.jobPage++
					this.getJobList(false)
					break;
				case 'com':
					this.companyPage++
					this.getCompanyList(false)
					break;
				case 'res':
					this.resumePage++
					this.getResumeList(false)
					break;
				default:
					break;
			}
		},
		methods: {
			...mapMutations(['setImShowParams', 'setImChatId']),
			/**
			 * 绑定微信二维码
			 */
			getScanQrcodeImg() {
				http.get(api.get_qrcode, {
					type: 'bind_weixin'
				}).then(res => {
					this.scanQrcodeImg = res.data.data
				})
			},
			/**
			 * 选择沟通职位
			 * @jobItem 当前沟通职位信息
			 */
			handleCommunicate(jobItem) {
				console.log(jobItem, 'jobItem')
				this.selectJobShow = false
				this.jobid = jobItem.id
				this.selectJobObj = jobItem
				this.doMsg()
			},
			/**
			 * 选择职位弹窗关闭
			 */
			handleCloseSelectJob() {
				this.selectJobShow = false
			},
			cancelSelectJob() {
				this.$refs.selectJobPopup.close()
			},
			getJob(istype, id, name, company_id = 0, companyname = '') {
				let loginType = this.$store.state.LoginType
				let confirmText = ''
				if (this.$store.state.LoginType === 0) {
					if (istype === 'compan') {
						this.thisType = 2
						confirmText = '当前操作需要登录个人账号'
					} else if (istype === 'job') {
						this.thisType = 2
						confirmText = '当前操作需要登录个人账号'
					} else {
						this.thisType = 1
						confirmText = '当前操作需要登录企业账号'
					}
				} else {
					if (istype === 'compan' && loginType === 1) {
						this.thisType = 2
						confirmText = '当前操作需要登录个人账号'
					} else if (istype === 'job' && loginType === 1) {
						this.thisType = 2
						confirmText = '当前操作需要登录个人账号'
					} else if (istype === 'resume' && loginType === 2) {
						this.thisType = 1
						confirmText = '当前操作需要登录企业账号'
					} else {
						confirmText = ''
					}
				}
				if (confirmText != '') {
					let that = this
					//未登录
					uni.showModal({
						cancelColor: '#323233',
						cancelText: '取消',
						confirmText: '去登录',
						confirmColor: '#1989fa',
						content: confirmText,
						success(res) {
							if (res.confirm) {
								that.$refs.loginPopup.open()
								that.after_login_data = {
									method: 'doMsg'
								}
								return false
							}
							if (res.cancel) {
								return false
							}
						}
					})
				} else {
					if (istype === 'compan') { // 企业id、企业名称
						this.companyId = id
						this.fullname = name
						if (company_id.length == 1) {
							this.jobid = company_id[0].id
						}
						this.doMsg()
					} else if (istype === 'job') { // 职位id、z职位名称、企业id、企业名称
						this.jobid = id
						this.jobname = name
						this.companyId = company_id
						this.fullname = companyname
						this.doMsg()
					} else { // 简历id 简历名称
						this.getcompanyinfo()
						this.jobid = 0
						this.resume_id = id
						this.fullname = name
						this.doMsg()
					}
				}
			},
			getcompanyinfo() {
				http
					.post(api.company_index, {}).then(res => {
						if (res.data.code == 200) {
							var {
								companyinfo
							} = res.data.data
							this.companyId = companyinfo.id
						}
					})
			},
			// 在线职聊
			doMsg() {
				http.post(api.imStart, {
					token: this.$store.state.imToken,
					resumeid: this.resume_id,
					jobid: this.jobid,
					companyid: this.companyId
				}).then(response => {
					// disabled 不能使用功能
					// bind_weixin绑定微信SelectJob
					// complete_resume完善简历
					// 空字符串 正常使用
					// choose_job 选择职位
					// pay 需要购买增值服务，触屏是快捷支付
					let res = response.data
					if (parseInt(res.code) == 200) {
						let nextData = res.data.next
						if (nextData == '') {
							this.setImShowParams({
								jobname: this.jobname,
								name: this.fullname,
								resumeid: this.resume_id,
								jobid: this.jobid,
								companyId: this.companyId
							})
							this.setImChatId(res.data.chatid)
							let chatid = res.data.chatid,
								that = this
							uni.navigateTo({
								url: '/im/imShow?chatid=' + res.data.chatid,
								events: {
									// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
									acceptDataFromOpenedPage: function(
										data) { //参数名字随便起，前后页面对应上即可
										//对发送回来的数据进行处理
										console.log(data)
									},
									someEvent: function(data) { //参数名字随便起，前后页面对应上即可
										console.log(data)
									}
								},
								success: function(res) {
									// 通过eventChannel向被打开页面传送数据
									res.eventChannel.emit('acceptDataFromOpenerPage', {
										chatid: chatid,
										// stick: that.base_info.stick,
										resumeid: that.resume_id
									}) //参数名字随便起，前后页面对应上即可
								},
							})
							return false
						}
						if (nextData == 'disabled') {
							uni.showModal({
								title: '提示',
								content: '当前操作需要登录企业账号',
								cancelText: "取消", // 取消按钮的文字  
								confirmText: "确认", // 确认按钮的文字  
								showCancel: true, // 是否显示取消按钮，默认为 true
								confirmColor: '#1360FF',
								cancelColor: '#cecece',
								success: (res) => {
									if (res.confirm) {
										this.$refs.LoginPopup.open()
										this.after_login_data = {
											method: 'doMsg'
										}
									} else {
										console.log('cancel')
									}
								}
							})
							return false
						}
						if (nextData == 'complete_resume') {
							uni.showModal({
								title: '系统提示',
								content: res.message,
								confirmText: '去完善简历',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/personal/EditResume'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
							return false
						}
						if (nextData == 'bind_weixin') {
							this.$refs.bindWeixinPopup.open()
						}
						if (nextData == 'pay') {
							uni.showModal({
								title: '系统提示',
								content: res.message,
								confirmText: '去支付',
								success() {
									uni.navigateTo({
										url: '/service/personal/addService'
									})
								}
							})
						}
						if (nextData == 'choose_job') {
							// this.selectJobShow = true
							this.$refs.selectJobPopup.open()
						}
					}
				})
			},
			handleJumpJob(item) {
				uni.navigateTo({
					url: '/commonViews/JobShow?id=' + item.id
				})
			},
			handleJumpCompany(item) {
				uni.navigateTo({
					url: '/commonViews/CompanyShow?id=' + item.id
				})
			},
			handleMsg() {
				this.$refs.TopTips.show({
					title: '功能开发中',
					type: 'error'
				})
			},
			handleJumpReserve() {
				if (!this.is_company_login) {
					// 如果登录的是个人账号则需要提示用户切换账号
					if (this.$store.state.LoginType == 2 && !this.is_company_login) {
						this.$refs.TopTips.show({
							title: '请登录企业账号',
							type: 'error'
						})
						return false
					}
					this.$refs.loginPopup.open()
					this.utype = 1
					this.after_login_data = {
						method: 'handleJumpReserve'
					}
				} else {
					uni.navigateTo({
						url: '/jobfairs/JobfairolReserve'
					})
				}
			},
			countScrollWidth() {
				let info = uni.createSelectorQuery().in(this).selectAll(".swiperItem");
				info.boundingClientRect((data) => {
					data.forEach((item) => {
						let width = item.width + 28
						this.scrollWidth += width
					})
					this.scrollTime = 0.75 * data.length
				}).exec(function(res) {
					// 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
				})
			},
			handelQrcode(item) {
				this.popuPItem = item
				this.$refs.popup.open()
			},
			phoneNumberLogin(item) {
				this.is_company_login = this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 1
				// setTimeout(() => {
				// 	this[this.after_login_data.method]()
				// }, 1000)
			},
			doApply(type) {
				let loginType = this.$store.state.LoginType
				let LoginOrNot = this.$store.state.LoginOrNot
				this.utype = parseInt(type)
				if (!LoginOrNot) {
					this.$refs.loginPopup.open()
					this.after_login_data = {
						method: 'doApply'
					}
				} else {
					if (type == 2 && loginType == 1) {
						// 点击个人参会 但是企业账号登录  提示请登录个人会员账号
						this.$refs.TopTips.show({
							title: '请登录个人会员账号',
							type: 'error'
						})
						return false
					}
					if (type == 1 && loginType == 2) {
						// 点击企业参会 但是个人账号登录  提示请登录企业会员账号
						this.$refs.TopTips.show({
							title: '请登录企业会员账号',
							type: 'error'
						})
						return false
					}
					http.post(api.jobfairol_apply, {
						jobfair_id: this.id
					}).then(res => {
						if (res.data.code == 200) {
							this.$refs.TopTips.show({
								title: res.data.message,
								type: 'success'
							})
						}
					}).catch(() => {})
				}
			},
			handleSearch() {
				if (this.currentTab === 'com') {
					this.getCompanyList(true)
				} else if (this.currentTab === 'job') {
					this.getJobList(true)
				} else if (this.currentTab === 'res') {
					this.getResumeList(true)
				}
			},
			// tab切换
			handelTab(type) {
				this.currentTab = type
			},
			// 获取招聘会详细信息
			getJobfairShow() {
				http.get(api.jobfairol_show, {
					id: this.id
				}).then(res => {

					if (res.data.code == 200) {
						this.info = res.data.data.info
						for (let i = 0; i < res.data.data.log.length; i++) {
							this.log.push({
								avatar: res.data.data.log[i].logo,
								msg: res.data.data.log[i].content
							})
						}
						// #ifdef MP-TOUTIAO || MP-ALIPAY
						uni.setNavigationBarTitle({
							title: this.info.title
						})
						// #endif
						this.skeletonLoading = false
						setTimeout(() => {
							this.countScrollWidth()
						}, 1000)
					}
				})
			},
			// 企业列表 
			getCompanyList(init) {
				let params = {
					jobfair_id: this.id,
					keyword: this.searchVal,
					page: this.companyPage,
					pagesize: this.pagesize,
				}
				http.get(api.jobfairol_comlist, params).then(res => {
					if (res.data.code == 200) {
						if (init) {
							this.companyList = res.data.data.items
						} else {
							this.companyList = this.companyList.concat(res.data.data.items)
						}
						this.skeletonLoading = false
						this.finished_status = 'loadmore';
						// 数据全部加载完成
						if (this.companyPage >= res.data.data.total_page && init === false) {
							this.finished_status = 'nomore'
						}
					}
				})
			},
			// 获取职位列表
			getJobList(init) {
				let params = {
					jobfair_id: this.id,
					keyword: this.searchVal,
					page: this.jobPage,
					pagesize: this.pagesize,
				}
				http.get(api.jobfairol_joblist, params).then(res => {
					if (res.data.code == 200) {
						if (init) {
							this.jobList = res.data.data.items
						} else {
							this.jobList = this.jobList.concat(res.data.data.items)
						}
						this.skeletonLoading = false
						this.finished_status = 'loadmore';
						if (this.jobPage >= res.data.data.total_page && init === false) {
							this.finished_status = 'nomore'
						}
					}
				})
			},
			// 简历列表
			getResumeList(init) {
				let params = {
					jobfair_id: this.id,
					keyword: this.searchVal,
					page: this.resumePage,
					pagesize: this.pagesize
				}
				http.get(api.jobfairol_resumelist, params).then(res => {
					if (res.data.code == 200) {
						if (init) {
							this.resumeList = res.data.data.items
						} else {
							this.resumeList = this.resumeList.concat(res.data.data.items)
						}
						this.skeletonLoading = false
						this.finished_status = 'loadmore';
						if (this.resumePage >= res.data.data.total_page && init === false) {
							this.finished_status = 'nomore'
						}
					}
				})
			},
			// 搜索类型切换
			handleSearchSelect(index) {
				let currentItem = this.searchSelectList[index]
				this.searchSelectVal = currentItem.text
				this.currentTab = currentItem.tab
			},
			// 跳转详情页面
			handleJumpResumeShow(item) {
				uni.navigateTo({
					url: '/commonViews/ResumeShow?id=' + item.id
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.banner {
		height: 300rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			display: block;
		}

		.card {
			position: absolute;
			left: 0;
			top: 0;
			color: #fff;
			font-size: 22rpx;
			border-radius: 0px 0px 25rpx 0px;
			padding: 8rpx 27rpx 8rpx 21rpx;

			&.color1 {
				background: linear-gradient(45deg, #16C272, #5AD099);
			}

			&.color2 {
				background: linear-gradient(45deg, #FC6502, #FF9149);
			}

			&.green,
			&.holddate1 {
				background: linear-gradient(45deg, #16C272, #5DD19B);
			}

			&.orange,
			&.holddate0 {
				background: linear-gradient(45deg, #FC6502, #FF9149);
			}

			&.grey,
			&.holddate2 {
				background: linear-gradient(45deg, #ABABAB, #C4C4C4);
			}

		}

		.bannerSwiper {
			position: absolute;
			bottom: 120rpx;
			left: 0;
			right: 0;
			overflow: hidden;

			.swiperContent {
				white-space: nowrap;
				animation: scrollToRight 15s 0.1s linear infinite;
				display: flex;
				flex-wrap: nowrap;
			}

			.swiperInner {
				flex-shrink: 0;
				width: 50%;
				display: flex;
				flex-wrap: nowrap;
			}

			.swiperItem {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				height: 40rpx;
				background: rgba(55, 55, 55, .5);
				border-radius: 20rpx;
				padding-right: 21rpx;
				margin-right: 54rpx;

				&:first-child {
					margin-left: 54rpx;
				}

				.img {
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
					margin-right: 12rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;

					image {
						display: block;
					}
				}

				.text {
					color: #fff;
					font-size: 20rpx;
				}
			}
		}
	}

	.wrapper {
		margin: 0 30rpx 0;
		padding: 0 0 140rpx;
	}

	.statistics {
		display: flex;
		align-items: center;
		margin: -80rpx 0 26rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		text-align: center;
		position: relative;
		z-index: 10;

		.num {
			flex: 1;

			.t1 {
				color: #1360FF;
				font-size: 48rpx;
				font-weight: bold;
			}

			.t2 {
				color: #2A2A2A;
				font-size: 26rpx;
				margin-top: 10rpx;
			}

			&.cgBg {
				background: url('@/jobfairs/static/img/statistics-left.png') no-repeat left center,
					url('@/jobfairs/static/img/statistics-right.png') no-repeat right center;
			}
		}
	}

	.search {
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;

		.searchSelect {
			flex-shrink: 0;
			width: 137rpx;
			height: 70rpx;
			border-radius: 35rpx 0rpx 0 35rpx;
			background: #fff;
			color: #2A2A2A;
			font-size: 28rpx;
			display: flex;
			align-items: center;

			.defText {
				padding-left: 40rpx;

				.icon {
					display: inline-block;
					align-items: center;
					justify-content: center;

					.arrowBottom {
						width: 30rpx;
						position: relative;

						&::after {
							position: absolute;
							right: 4rpx;
							top: -14rpx;
							width: 12rpx;
							height: 12rpx;
							margin-top: -6rpx;
							border-top: 2rpx solid #2a2a2a;
							border-right: 2rpx solid #2a2a2a;
							transform: rotate(134deg);
							content: " ";
						}
					}
				}
			}
		}

		.searchIpt {
			background: #fff;
			flex-shrink: 0;
			width: 397rpx;
			border-radius: 0 35rpx 35rpx 0;
			padding-left: 24rpx;
		}

		.searchBtn {
			flex-shrink: 0;
			color: #FFFFFF;
			font-size: 30rpx;
			width: 138rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			border-radius: 35rpx;
			background: linear-gradient(45deg, #1360FF, #3778FF);
			margin-left: 24rpx;
		}
	}

	.tabWrapper {
		.tabBtn {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 14rpx;
			background: #fff;
			margin-bottom: 20rpx;

			.btn {
				flex: 1;
				color: #2A2A2A;
				font-size: 30rpx;
				position: relative;
				height: 82rpx;
				line-height: 82rpx;
				text-align: center;
				font-weight: 500;

				&.ac {
					color: #1360FF;
					font-size: 36rpx;
					font-weight: 500;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 32rpx;
						height: 6rpx;
						background: #1360FF;
						border-radius: 4rpx 4rpx 0rpx 0rpx;
					}
				}
			}
		}

		.tabCon {
			.con {

				// 企业
				.companyItem {
					background: #fff;
					margin-bottom: 22rpx;
					padding: 26rpx 0;
					border-radius: 14rpx;

					.companyInfo {
						padding: 0 26rpx 30rpx;
						display: flex;

						.img {
							flex-shrink: 0;
							width: 90rpx;
							height: 90rpx;
							border-radius: 8rpx;
							border: 1rpx solid #F7F7F7;
							overflow: hidden;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 20rpx;
							border-radius: 8rpx;

							image {
								display: block;
							}
						}

						.infoText {
							flex-shrink: 0;
							width: calc(100% - 112rpx - 28rpx - 20rpx);
							margin-right: 20rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.companyName {
								color: #2A2A2A;
								font-size: 36rpx;
								font-weight: bold;
							}

						}

						.icon {
							display: flex;
							align-items: center;
							justify-content: center;

							.arrowRight {
								width: 30rpx;
								position: relative;

								&::after {
									position: absolute;
									right: 4rpx;
									top: 50%;
									width: 15rpx;
									height: 15rpx;
									margin-top: -6rpx;
									border-top: 2rpx solid #797979;
									border-right: 2rpx solid #797979;
									transform: rotate(45deg);
									content: " ";
								}
							}
						}
					}

					.jobList {
						.jobItem {
							padding: 24rpx 26rpx;

							&:last-child::after {
								display: none;
							}

							&:last-child {
								margin-bottom: 0;
								padding-bottom: 0;
							}
						}
					}
				}

				// 企业

				// 职位
				.jobItem {
					background: #fff;
					border-radius: 14rpx;
					margin-bottom: 16rpx;
					padding: 0 0 26rpx;

					.jobcon {
						padding: 33rpx 18rpx 20rpx 29rpx;

						.jobInfo {
							.jobName {
								font-weight: bold;
							}
						}
					}

					.companyInfo {
						display: flex;
						align-items: center;
						padding: 30rpx 30rpx 0rpx;

						.img {

							width: 70rpx;
							height: 70rpx;
							margin-right: 16rpx;
							position: relative;
							border-radius: 50%;
							border: 1rpx solid #f2f2f2;
							flex-shrink: 0;


							// flex-shrink: 0;
							// width: 60rpx;
							// height: 60rpx;
							// overflow: hidden;
							// display: flex;
							// align-items: center;
							// justify-content: center;
							// margin-right: 16rpx;
							// border: 1rpx solid #F7F7F7;
							// border-radius: 30rpx;

							image {
								display: block;
								border-radius: 50%;
								width: 100%;
								height: 100%;
							}
						}

						.infoText {
							flex-shrink: 0;
							width: calc(100% - 76rpx - 50rpx - 150rpx);
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							margin-right: 50rpx;

							.t1 {
								color: #2A2A2A;
								font-size: 26rpx;
								margin-bottom: 14rpx;
							}

							.t2 {
								color: #999999;
								font-size: 24rpx;
							}
						}

						.address {
							flex-shrink: 0;
							width: 150rpx;
							text-align: right;
							color: #999999;
							font-size: 26rpx;
						}
					}
				}

				// 职位

				// 人才
				.resumeItem {
					background: #fff;
					border-radius: 14rpx;
					margin-bottom: 20rpx;
					padding-bottom: 26rpx;

					.resumeInfo {
						padding: 30rpx 36rpx 0rpx 29rpx;
						position: relative;

						.resumeInner {
							padding: 0 0 24rpx;
						}

						.resumeImg {
							position: absolute;
							right: 40rpx;
							top: 40rpx;
							width: 98rpx;
							height: 98rpx;
							border: 1rpx solid #f2f2f2;
							border-radius: 50%;

							.man,
							.woman {
								width: 22rpx;
								height: 22rpx;
								display: block;
								position: absolute;
								right: 0;
								bottom: 0;
							}

							.img {
								border-radius: 50%;
								display: block;
								width: 100%;
								height: 100%;
							}
						}

						.resumeName {
							width: 500rpx;
							color: #2a2a2a;
							font-size: 36rpx;
							font-weight: bold;
							margin-bottom: 18rpx;
							position: relative;
							// margin-left: 116rpx;
							vertical-align: middle;

							.tag {
								border: 1rpx solid #FC6502;
								color: #FC6502;
								font-size: 22rpx;
								font-weight: normal;
								border-radius: 6rpx;
								padding: 0rpx 10rpx;
								background: #FFF7F2;
								margin-left: 14rpx;
								vertical-align: middle;
								display: inline-block;
								margin-top: -6rpx;
							}

							&.isPd {
								padding-left: 30rpx;
							}

							&.ac {
								color: #797979;
							}
						}

						.other {
							width: 500rpx;
							color: #797979;
							font-size: 24rpx;

							// margin-left: 116rpx;
							.otherItem {
								font-size: 28rpx;
								margin-right: 10rpx;
								border-radius: 6rpx;
								text-align: center;
								padding: 4rpx 18rpx;
								display: inline-block;
								color: #2263E9;
								font-size: 24rpx;
								background: #F3F6FD;

								&.color1 {
									color: #FF9D54;
									background: rgba(255, 157, 84, 0.08);
								}

								&.color2 {
									color: #AE79FF;
									background: rgba(174, 121, 255, 0.08);
								}

								&.color3 {
									color: #74CEA9;
									background: rgba(116, 206, 169, 0.08);
								}
							}
						}

						.resumeBottom {

							// padding: 0rpx 28rpx 26rpx;
							.intentionJob {
								max-width: 500rpx;
								color: #2a2a2a;
								font-size: 30rpx;
								background: url('../static/img/index/collect.png') no-repeat left center;
								background-size: 26rpx 22rpx;
								padding-left: 36rpx;
								margin-bottom: 14rpx;
							}

							.address {
								max-width: 500rpx;
								color: #555555;
								font-size: 30rpx;
								background: url('../static/img/index/address.png') no-repeat left center;
								padding-left: 36rpx;
								background-size: 22rpx 26rpx;

								.item {
									margin-right: 30rpx;
									position: relative;
									font-size: 30rpx;

									&::after {
										content: '';
										position: absolute;
										right: -16rpx;
										top: 50%;
										transform: translateY(-50%);
										width: 4rpx;
										height: 4rpx;
										border-radius: 50%;
										background: #555555;
									}

									&:last-child::after {
										display: none;
									}
								}

								&.add2 {
									margin-bottom: 0;
									background: url('../static/img/index/job.png') no-repeat left center / 24rpx 22rpx;
								}
							}
						}

						// .hopeJob {
						// 	color: #2A2A2A;
						// 	font-size: 26rpx;
						// 	display: inline-block;
						// 	padding: 0 20rpx 0 42rpx;
						// 	margin-bottom: 10rpx;
						// 	background: url('../static/img/index/job.png')no-repeat 8rpx center / 27rpx 26rpx, linear-gradient(to right, #F6F9FF 0%, #F2F6FF 50%, #F6F9FF 100%);
						// }

						// .hopeAddress {
						// 	color: #555555;
						// 	font-size: 26rpx;
						// 	padding-left: 42rpx;
						// 	background: url('../static/img/index/address.png') no-repeat 12rpx center / 22rpx 27rpx;
						// }
					}


				}

				// 人才

				// 简介
				.blurb {
					background: #FFFFFF;
					border-radius: 14rpx;
					padding: 28rpx 0 57rpx;
					margin-bottom: 15rpx;

					.blurbTitle {
						color: #2A2A2A;
						font-size: 32rpx;
						position: relative;
						// padding-left: 34rpx;
						font-weight: bold;
						padding: 10rpx 0 10rpx 34rpx;

						&::before {
							content: '';
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 4rpx;
							height: 28rpx;
							background: #266DFF;
							border-radius: 0px 4rpx 4rpx 0px;
						}
					}

					.text {
						color: #595959;
						font-size: 28rpx;
						padding: 0 34rpx;
						margin: 0 0 49rpx;

						&:last-child {
							margin-bottom: 0;
						}
					}
				}

				// 简介 


				// 通用
				.tag {
					// display: flex;
					// white-space: nowrap;

					.item {
						position: relative;
						color: #797979;
						font-size: 24rpx;
						margin-right: 30rpx;
						display: inline;
						white-space: nowrap;

						&::before {
							content: '';
							position: absolute;
							right: -16rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 4rpx;
							height: 4rpx;
							border-radius: 50%;
							background: #797979;
						}

						&:last-child {
							margin-right: 0;
						}

						&:last-child::before {
							display: none;
						}
					}
				}

				.jobInfo {
					font-size: 32rpx;
					margin-bottom: 10rpx;

					.jobName {
						flex-shrink: 0;
						color: #2A2A2A;
						margin-right: 20rpx;
						font-size: 34rpx;

						&.font36 {
							font-size: 36rpx;
						}
					}
				}

				.jobSalary {
					color: #FC6502;
					font-size: 36rpx;
					margin: 10rpx 0 14rpx;
					padding-left: 8rpx;
				}

				.jobTag {

					display: flex;

					.tag {
						// color: #797979;
						// font-size: 24rpx;
						// background: rgba(15, 93, 255, 0.06);
						// border-radius: 4rpx;
						// padding: 8rpx 16rpx;
						// margin-right: 12rpx;
						font-size: 28rpx;
						margin-right: 10rpx;
						border-radius: 6rpx;
						text-align: center;
						padding: 4rpx 18rpx;
						display: inline-block;
						color: #2263E9;
						font-size: 24rpx;
						background: #F3F6FD;

						&.color1 {
							color: #FF9D54;
							background: rgba(255, 157, 84, 0.08);
						}

						&.color2 {
							color: #AE79FF;
							background: rgba(174, 121, 255, 0.08);
						}

						&.color3 {
							color: #74CEA9;
							background: rgba(116, 206, 169, 0.08);
						}
					}
				}

				.btns {
					display: flex;
					padding: 40rpx 26rpx 0;

					.btn {
						height: 70rpx;
						line-height: 70rpx;
						padding: 0rpx 90rpx;
						border-radius: 14rpx;
						margin-right: 40rpx;
						border: 2rpx solid transparent;
						white-space: nowrap;

						&+.btn {
							margin-right: 0;
						}

						&.blue {
							font-size: 14px;
							color: #266DFF;
							background: #F3F7FF;
							border: 2rpx solid #1763FF;
						}

						&.orange {
							font-size: 14px;
							color: #FC6502;
							background: #FFF9F5;
							border: 2rpx solid #FC6502;
						}
					}
				}
			}
		}
	}

	.participation {
		width: 105rpx;
		height: 105rpx;
		box-shadow: 0px 0px 40rpx 0px rgba(173, 173, 173, 0.31);
		border-radius: 50%;
		position: fixed;
		right: 46rpx;
		bottom: 200rpx;
		color: #2A2A2A;
		font-size: 18rpx;
		padding-top: 62rpx;
		text-align: center;
		z-index: 100;
		background: #FFFFFF url('@/jobfairs/static/img/participation.png') no-repeat center 16rpx / 40rpx 40rpx;
	}

	.footerBtns {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		background: #FFFFFF;
		padding: 30rpx 57rpx;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn {
			// margin-right: 32rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			padding: 24rpx 87rpx;
			display: inline-block;
			border-radius: 50rpx;

			&+.btn {
				margin-right: 0;
			}

			&.color1 {
				background: linear-gradient(45deg, #16C272, #5DD19B);
			}

			&.color2 {
				background: linear-gradient(45deg, #1360FF, #4381FF);
			}
		}
	}

	.weixDialog {
		padding: 28rpx 0 38rpx 0;

		.wxQr {
			margin-bottom: 26rpx;

			.qrCode {
				width: 400rpx;
				height: 400rpx;
				display: block;
				margin: 0 auto;
			}
		}

		.wxTips {
			color: #595959;
			font-size: 28rpx;
		}
	}

	// 绑定微信开始
	.bind-weixin-box {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding: 10px 0;

		.title-1 {
			color: #646566;
			font-size: 14px;
		}

		.img {
			width: 111px;
			height: 111px;
			margin: 13px auto 10px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.title-2 {
			color: #999999;
			font-size: 13px;
		}
	}

	//绑定微信结束
	@keyframes scrollToRight {
		from {
			transform: translate3d(0%, 0, 0);
		}

		to {
			transform: translate3d(-49%, 0, 0);
		}
	}
</style>